<!DOCTYPE html>
<html lang="en">
<script src="../Toos/jquery-3.6.0.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #M {
            height: 350px;
            width: 500px;
            border: 1px solid blueviolet;
            text-align: center;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .unx {
            background: yellow;
        }

        .ths {
            border-bottom: 2px solid red;
        }

        td {
            border-right: 1px solid black;
        }
    </style>
</head>
<body>
<div id="M"></div>
</body>
<script>
    class Table0 {
        constructor() {
            this.option = {
                width: 600,
                thd: null,
                th_height: 30,
                click: {
                    th: null,
                    td: null,
                    tr: null
                },
                odd: {"background": "gainsboro"},
                even: {"background": "ghostwhite"}
            }
        }

        run(r) {
            var Main = $(`#${r}`);
            var className = "Main";
            var hs = Main.height();
            var ht = this.option.th_height;
            //
            var t0 = Main.find(`div.${className}`).length === 0;
            var t1 = hs - ht;
            var t2 = t1 > 0;
            var tb_width = this.option.width;
            //
            var self = this;
            //
            if (t0 && t2) {
                var tb = $("<div></div>").attr('class', className);
                var th = $("<div></div>")
                    .attr('class', 'th')
                    .attr('style', `overflow-x: hidden;height:${ht}px`);
                this.th1 = $("<div></div>")
                    .attr('class', 'ths').attr('style', `width:${tb_width}px`)
                th.append(this.th1);
                var tr = $("<div class='tr'></div>")
                    .attr('class', 'tr')
                    .attr('style', `overflow: auto;height:${t1}px`);
                this.tr1 = $("<div></div>")
                    .attr('class', 'trs').attr('style', `width:${tb_width}px`);
                tr.append(this.tr1);
                //
                tb.append(th);
                tb.append(tr);
                Main.html(tb);
                //
                tr.on("scroll", function () {
                    th[0].scrollLeft = tr[0].scrollLeft;
                })
                this.thd(this.option.thd);
                this.add(this.option.add);
            } else if (t2 === false) {
                console.error(`整体高度${hs}px不够 小于${ht}px额定表头`)

            }
        }

        tr_click(info) {
            var g = this.option.click.tr;
            if (g !== null) {
                g(info);
            }
        }

        td_click(info) {
            var g = this.option.click.td;
            if (g !== null) {
                g(info);
            }
        }

        add(data) {
            if (data !== null) {
                var thdx = this.option.thd;
                var self = this;
                var ax0 = $("<table style='width: 100%'></table>");
                var bx0 = $("<tbody></tbody>");
                var js = 0;
                var odd = this.option.odd,even = this.option.even;
                for (var s in data) {
                    var e = data[s];
                    var ax = $("<tr></tr>");
                    ax.click(function () {
                        self.tr_click($(this));
                    })
                    //
                    if (js % 2 === 0) {
                        ax.css(even);
                    } else {
                        ax.css(odd);
                    }
                    //
                    for (var t in e) {
                        var bx = $("<td></td>");
                        var tn = e[t];
                        bx.css('width', `${thdx[t]}%`);
                        //
                        bx.click(function () {
                            self.td_click($(this))
                        })
                        //
                        bx.text(tn);
                        ax.append(bx);
                    }
                    bx0.append(ax);
                    js += 1;
                }
                ax0.append(bx0);
                this.tr1.html(ax0);
            }

        }

        th_click(info) {
            var g = this.option.click.th;
            if (g !== null) {
                g(info);
            }
        }

        thd(data) {
            if (data !== null) {
                var self = this;
                var ax = $("<table style='width: 100%'></table>");
                var bx = $("<thead></thead>");
                for (var s in data) {
                    var cx = $("<th></th>");
                    cx.text(s);
                    cx.css('width', `${data[s]}%`)
                    //
                    cx.click(function () {
                        self.th_click($(this))
                    })
                    bx.append(cx);
                }
                ax.append(bx);
                this.th1.html(ax);
            }

        }
    }
</script>
<script>
    function ed() {
        beg = {}
        for (var s = 0; s < 6; s++) {
            beg[`test${s}`] = Math.ceil(Math.random() * 10);
        }
        return beg;
    }

    function so() {
        var spppf = [];

        // var ii = [];
        for (var s = 0; s < 50; s++) {
            // ii.push(s);
            var o = ed();
            spppf.push(o);
        }
        // shuffle(ii);
        // for (var e in ii) {
        //     spppf[e] = ed();
        // }
        return spppf;
    }
</script>
<script>
    var g = new Table0();
    g.option.thd = {
        "test0": 10,
        "test1": 10,
        "test2": 10,
        "test3": 10,
        "test4": 10,
        "test5": 10,
    }
    g.option.add = so();
    g.run('M');
    // setInterval(function () {
    //     g.add(so());
    // }, 1000)
    g.option.click.th = function (d) {
        console.log(d);
    }
    g.option.click.tr = function (d) {
        console.log(d);

    }
</script>
</html>